<template>
    <a-layout-header class="header">
        <div class="logo"><img src="image/wiki_logo.png"/></div>
        <a class="login-menu" v-show="!user.id" @click="showLoginModal">
            <span>登录</span>
        </a>
        <!-- 由于样式里面用的float靠右，所以”您好“先float到右边，”退出登录“再float到右边，能保证”退出登录“在”您好“左边 -->
        <a class="login-menu" v-show="user.id">
            <span>您好：{{user.name}}</span>
        </a>
        <a-popconfirm
                title="确认退出登录?"
                ok-text="是"
                cancel-text="否"
                @confirm="logout"
        >
            <a class="login-menu" v-show="user.id">
                <span>退出登录</span>
            </a>
        </a-popconfirm>

        <a-menu
                theme="dark"
                mode="horizontal"
                :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="/">
                <router-link to="/">首页</router-link>
            </a-menu-item>
            <!-- v-show属性在<a-menu-item>标签中不生效，使用v-if才生效，用样式表写法也不生效，如 :style="user.id? {} : {display:'none'}" -->
            <!-- 遇到此类组件对于写法的兼容性问题，需要多尝试不同写法 -->
            <a-menu-item key="/admin/user" v-if="user.id">
                <router-link to="/admin/user">用户管理</router-link>
            </a-menu-item>
            <a-menu-item key="/admin/ebook" v-if="user.id">
                <router-link to="/admin/ebook">电子书管理</router-link>
            </a-menu-item>
            <a-menu-item key="/admin/category" v-if="user.id">
                <router-link to="/admin/category">分类管理</router-link>
            </a-menu-item>
            <a-menu-item key="/about">
                <router-link to="/about">关于我们</router-link>
            </a-menu-item>
        </a-menu>
        <a-modal
                title="登录"
                v-model:visible="loginModalVisible"
                :confirm-loading="loginModalLoading"
                @ok="login">
            <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="登录名">
                    <a-input v-model:value="loginUser.loginName"/>
                </a-form-item>
                <a-form-item label="密码">
                    <a-input-password v-model:value="loginUser.password" :visibilityToggle="false"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </a-layout-header>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import axios from 'axios';
import { message } from 'ant-design-vue';
import store from "@/store";

// 上面的<script>标签中要有 lang="ts" ，否则下面的declare会编译报错
// hexMd5方法和KEY常量，已经在index.html中引入了对应js文件了，可以直接用，但vue的TypeScript还不知道，编译会报错。用declare，告诉该文件，下面两个变量是存在的。
declare let hexMd5: any;    // 函数（字符串转为32位的16进制字符串）
declare let KEY: any;       // 盐值

export default defineComponent({

    name: 'the-header',
    setup() {
        // 登录后保存（计算属性，从sessionStorage中获取---由vuex封装了sessionStorage操作）
        const user = computed(() => store.state.user);

        // ---- 登录表单 ----
        const loginUser = ref();  // 用来登录
        loginUser.value = {       // 直接用 ref({}) 创建的话，编译时报错：Property 'password' does not exist on type '{}'.
            loginName: "test",
            password: "test123"
        } ;
        const loginModalVisible = ref(false);
        const loginModalLoading = ref(false);

        /** 弹出登录Modal */
        const showLoginModal = () => {
            loginModalVisible.value = true ;
        };

        /** 发起登录 */
        const login = () => {
            loginModalLoading.value = true ;  // 加载中
            loginUser.value.password = hexMd5(loginUser.value.password + KEY) ;   // 前端针对密码进行MD5加密，避免传输报文被截获泄露
            axios.post("/user/login", loginUser.value).then((response) => {
                loginModalLoading.value = false;     // 加载动画关闭
                const data = response.data ;
                if(data.success){
                    loginModalVisible.value = false; // 后台返回成功结果后，Modal框关闭
                    message.success("登录成功！");
                    // 登录成功后，将返回的用户信息，放入vuex的全局变量中(同时也放入了sessionStorage)
                    store.commit("setUser", data.content) ; // commit可以触发指定vuex的mutations中的方法（第一个参数state是默认自带的，不用写）
                }else {
                    loginUser.value.password = null ; // 密码输入域置空，方便用户重新输入
                    message.error(data.message);
                }
            });
        };

        /** 退出登录 */
        const logout = () => {
            axios.get("/user/logout/" + user.value.token).then((response) => {
                const data = response.data ;
                if(data.success){
                    message.success("退出登录成功！");
                    store.commit("setUser", {}) ; // vuex和sessionStorage里面的全局user置空
                }else {
                    message.error(data.message);
                }
            });
        };

        return{
            loginUser,
            loginModalVisible,
            loginModalLoading,
            showLoginModal,
            login,
            user,
            logout
        };
    },

});
</script>

<style scoped>
  .logo {
    float: left;
    width: 120px;
    height: 33px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
  }
  .logo img {
    float: left;
    width: 120px;
    height: 33px;
  }
  .login-menu {
    float: right;
    color: white;
    padding-left: 10px;
  }
</style>
